<template>
  <div class="container-room" >
	  <!-- 头部 -->
	  <head-message></head-message>
	  <!-- 搜索框 -->
	  <div class="search">
		  <div class="search-input">
			  <van-field @click="toSearch" v-model="searchWord" left-icon="search" placeholder="请输入区域、商圈、小区或街道名开始找店铺" />
		  </div>
	  </div>
	  <!-- 选择区域 -->
	  <van-dropdown-menu class="dropdown-menu" :class="scrollTop?'on':''">
	    <van-dropdown-item v-model="queryForm.district" :title="districtTitle" ref="item">
			<van-area 
				ref="area"
				:area-list="areaList"  
				@confirm="confirmCode" 
				@cancel="cancelCode"
			/>
		</van-dropdown-item>
		<van-dropdown-item class="rentItem" ref="rentItem" 
			v-model="queryForm.rent" 
			@change="changeRent" 
			:title="comRentTitle" 
			:options="optionsRent"
			@closed="delRentNum"
		>
			<div class="rent-select">
				<div class="rent-title">价格区间（元）</div>
				<div class="rent-input">
					<van-field @blur.prevent="changeBlur()"  @input="changeminPrices" v-model="minPrices" placeholder="最低价格" />
					<span>至</span>
					<van-field @input="changemaxPrices" v-model="maxPrices" placeholder="最高价格" />
				</div>
			</div>
			<div class="sure-btn">
				<van-button type="danger" block round @click="onConfirmRent">
					确认
				</van-button>
			</div>
		</van-dropdown-item>
		<van-dropdown-item v-model="queryForm.format" @change="changeformat" :title="formatTitle" :options="formatList"/>
		<van-dropdown-item 
			ref="areaItem"
			class="areaItem"
			v-model="queryForm.area" 
			@change="changeArea" 
			:title="comAreaTitle" 
			:options="areaNumList"
			@close="delAreaNum"
		>
			<div class="rent-select">
				<div class="rent-title">建筑面积（㎡）</div>
				<div class="rent-input">
					<van-field @input="changeminArea" v-model="minArea" placeholder="最低面积" />
					<span>至</span>
					<van-field @input="changemaxArea" v-model="maxArea" placeholder="最高面积" />
				</div>
			</div>
			<div class="sure-btn area">
				<van-button type="danger" block round @click="onConfirmArea">
					确认
				</van-button>
			</div>
		</van-dropdown-item>
		<van-dropdown-item v-model="queryForm.sortType" @change="changeArry" :title="ArryTitle" :options="ArryList"/>
		<!-- <van-dropdown-item  title="更多">
			<div class="dropdown-content">
				<div class="floor f1">
					<div class="dropdown-title">行业</div>
					<div class="dropdown-list">
						<div class="list-item" v-for="item in formatList" :key="item.id">
							{{item.name}}
						</div>
					</div>
				</div>
			</div>
		</van-dropdown-item> -->
	  </van-dropdown-menu>
	  <!-- 列表区域 -->
	  <van-list
		v-model="loading"
		:finished="finished"
		finished-text="没有更多了"
		@load="reLoadData"
		:immediate-check="false"
		offset="10"
		v-if="roomList.length>0"
		>
		<div class="room-list">
			<div class="room-item" @click="to_detail(item1.id)" v-for="item1 in roomList" :key="item1.id">
				<div class="room-pic">
					<img :src="item1.roomPicture" alt="">
					<div class="sale-img" v-if="item1.realEstateExclusiveAgent==1">
						独家项目
					</div>
					<div class="sale-text" v-if="item1.viewingBonus>=1&&item1.viewingBonus!=null">带看奖励</div>
				</div>
				<div class="room-text">
					<div class="room-name">
						{{item1.roomName}}
						<!-- <span v-if="item1.realEstateExclusiveAgent==1">
							<img src="../assets/sole.png" alt="">
						</span> -->
					</div>
					<div class="room-address">
						<span>{{item1.realEstateModule}}</span>
						<span>|</span>
						<span>{{item1.realEstateCity}}-{{item1.realEstateDistrict}}-{{item1.realEstateName}}</span>
					</div>
					<div class="room-format">
						<div class="format-item" v-for="item2 in item1.roomPropertyConditionsFormat" :key="item2">
							{{item2}}
						</div>
					</div>
					<div class="room-num">
						<div class="num-area">建筑面积：{{item1.constructionArea}}㎡</div>
						<div class="num-prices">{{item1.monthlyRent ? (item1.monthlyRent/item1.constructionArea + 1).toFixed(0) : 0}} 元/月/㎡</div>
					</div>
				</div>
			</div>
		</div>
	  </van-list>
	  <div class="hasNone" v-else>
		  <img src="../assets/none.png" alt="">
		  <div class="text">更多商铺正在入驻中</div>
	  </div>
	  <!-- 通用底部 -->
	  <div class="foot" :class="roomList.length<=3?'on':''">
		  <foot-message></foot-message>
	  </div>
  </div>
</template>
<script>
import FootMessage from '@/components/foot-message/index.vue'
import{mapActions,mapState} from "vuex"
import {recommroomList} from "@/api/room"
import HeadMessage from '@/components/head-message/index.vue'
export default {
	components:{
		HeadMessage,
		FootMessage
	},
  data(){
    return{
		docmHeight: document.documentElement.clientHeight,  //默认屏幕高度
        showHeight: document.documentElement.clientHeight,   //实时屏幕高度
        hidshow: true,  //显示或者隐藏footer, 
		searchWord:'',
		AreaCode:"",
		areaList:{
			province_list: {
			  430000: '湖南省',
			},
			city_list: {
				 430100: '长沙市',
				 430200: '株洲市',
				 430300: '湘潭市',
				 430400: '衡阳市',
				 430500: '邵阳市',
				 430600: '岳阳市',
				 430700: '常德市',
				 430800: '张家界市',
				 430900: '益阳市',
				 431000: '郴州市',
				 431100: '永州市',
				 431200: '怀化市',
				 431300: '娄底市',
			},
			county_list: {
				  430102: '芙蓉区',
				  430103: '天心区',
				  430104: '岳麓区',
				  430105: '开福区',
				  430111: '雨花区',
				  430112: '望城区',
				  430121: '长沙县',
				  430181: '浏阳市',
				  430182: '宁乡市',
			},
		},
		// 商铺查询参数
		queryForm: {
		  area: "", // 店铺面积
		  district: "", // 地区
		  format: "", // 业态
		  keywords: "",
		  pageNumber: 1,
		  pageSize: 5,
		  rent: "", // 价格
		  sortColumn:null, //排序字段(1:时间排序，2:价格，3:面积)
		  sortType:""  //排序字段(0:倒叙，1:正序)
		},
		// 租金title
		RentTitle:"租金",
		// 租金列表
		optionsRent:[
			{ text: '不限', value: "" },
			{ text: '10000元以下', value: "1000以下" },
			{ text: '10000-15000元', value: "1000-1500" },
			{ text: '15000-20000元', value: "15000-20000" },
			{ text: '20000-25000元', value: "20000-25000" },
			{ text: '25000-30000元', value: "25000-30000" },
		],
		// 最小租金
		minPrices:"",
		// 最大租金
		maxPrices:"",
		// 区域title
		districtTitle:"区域",
		// 行业title
		formatTitle:"业态",
		// 行业列表
		formatList:[
		  {text:"不限",value:""},
          {text:"餐饮",value:"餐饮"},
          {text:"零售",value:"零售"},
          {text:"儿童",value:"儿童"},
          {text:"生活配套",value:"生活配套"},
		  {text:"休闲娱乐",value:"休闲娱乐"},
		],
		// 最小面积
		minArea:"",
		// 最大面积
		maxArea:"",
		// 面积列表
		areaTitle:"面积",
		areaNumList:[
		  {text:"不限",value:""},
          {text:"20㎡以下",value:"20以下"},
          {text:"20-50㎡",value:"20-50"},
          {text:"50-100㎡",value:"50-10"},
          {text:"100-200㎡",value:"100-200"},
		],
		// 店铺数组排序列表
		ArryTitle:"排序",
		ArryList:[
		  {text:"不限",value:""},
          {text:"最新发布",value:"最新发布"},
          {text:"价格降序",value:"价格降序"},
          {text:"价格升序",value:"价格升序"},
          {text:"面积降序",value:"面积降序"},
		  {text:"面积升序",value:"面积升序"},
		],
		// 店铺物业条件数组
		roomwuyeList:[
			{name:"网络",id:0,value:false},
			{name:"暖气",id:1,value:false},
			{name:"天然气",id:2,value:false},
			{name:"上下水",id:3,value:false},
			{name:"可明火",id:4,value:false},
			{name:"排烟",id:5,value:false},
			{name:"排污",id:6,value:false},
			{name:"管煤",id:7,value:false},
			{name:"停车位",id:8,value:false},
			{name:"380v",id:9,value:false},
			{name:"扶梯",id:10,value:false},
			{name:"货梯",id:11,value:false},
			{name:"客梯",id:12,value:false},
			{name:"中央空调",id:13,value:false},
			{name:"外摆区",id:14,value:false},
		],
		// 店铺数组
		roomList:[],
		loading: false,
      	finished: false,
		scrollTop:false,
		show:true
    }
  },
  computed:{
	  ...mapState(["vuexqueryForm"]),
	  comRentTitle(){
		//   console.log(this.RentTitle)
		if(this.RentTitle=="租金"){
			return this.RentTitle="租金"
		}else if(this.RentTitle.indexOf("元")==-1){
			return this.RentTitle+"元"
		}else{
			return this.RentTitle
		}
	  },
	  comAreaTitle(){
		if(this.areaTitle=="面积"){
			return this.areaTitle="面积"
		}else{
			return this.areaTitle
		}
	  }
  },
  watch:{
	//   改变监听租金为不限时的标题
	RentTitle:{
		handler: function (newVal, oldVal) {
			console.log(newVal)
			if(newVal==""){
				this.RentTitle="租金"
			}
		},
		deep: true
	},
	//   改变监听面积为不限时的标题
	areaTitle:{
		handler: function (newVal, oldVal) {
			console.log(newVal)
			if(newVal=="20以下"){
				this.areaTitle="20㎡以下"
			}else if(newVal==""){
				this.areaTitle="面积"
			}
		},
		deep: true
	},
	//   改变监听区域为不限时的标题
	districtTitle:{
		handler: function (newVal, oldVal) {
			// console.log(newVal)
			if(newVal==""){
				this.districtTitle="区域"
			}
		},
		deep: true
	},
	//  改变监听业态为不限时的标题
	formatTitle:{
		handler: function (newVal, oldVal) {
			console.log(newVal)
			if(newVal==""){
				this.formatTitle="业态"
			}
		},
		deep: true
	},
	ArryTitle:{
		handler: function (newVal, oldVal) {
			console.log(newVal)
			if(newVal==""){
				this.ArryTitle="排序"
			}
		},
		deep: true
	},
	nowPhoneHeight:{
		handler: function (newVal, oldVal) {
			if(this.defaultPhoneHeight != this.nowPhoneHeight){
          	//手机键盘被唤起了。
			  this.show=false
			}else{
				//手机键盘被关闭了。
			}
		},
		deep: true
	}

  },
  created(){
	//   加载标题
	document.title = '租店铺'+'-躺猪网-好铺好服务找铺上躺猪网！'
	// 请求店铺数据
	this.loadData()
	// this.test()
  },
  beforeDestroy () {
	//  下拉监听
	document.removeEventListener("scroll", this.listenerFunction);
  },
  // 离开页面清除缓存
  destroyed(){
    var vuexqueryForm= {
      area: "", // 店铺面积
      district: "", // 地区
      format: "", // 业态
      keywords: "",
      pageNumber: 1,
      pageSize: 5,
      rent: "", // 价格
      sortColumn:"", //排序字段(1:时间排序，2:价格，3:面积)
      sortType:""  //排序字段(0:倒叙，1:正序)
    }
    this.SaveUserSelect(vuexqueryForm)// 存入Vuex
  },
  mounted(){

	const{vuexqueryForm}=this
	//  下拉监听
	this.listenerFunction()
	this.queryForm=vuexqueryForm
	// 租金赋值展示
	if(vuexqueryForm.rent.indexOf("以下")!=-1){
		this.RentTitle=vuexqueryForm.rent.replace('以下', '元以下')
		// console.log(this.RentTitle)
	}else if(vuexqueryForm.rent.indexOf("以上")!=-1){
		this.RentTitle=vuexqueryForm.rent.replace('以上', '元以上')
	}else{
		this.RentTitle=vuexqueryForm.rent
	}
	// 区域赋值展示
	this.districtTitle=vuexqueryForm.district
	// 业态 赋值展示
	this.formatTitle=vuexqueryForm.format
	// 输入框关键字展示
	this.searchWord=vuexqueryForm.keywords

	// 面积 赋值展示
	if(vuexqueryForm.area.indexOf("以下")!=-1){
		this.areaTitle=vuexqueryForm.area.replace('以下', '㎡以下')
		// console.log(this.RentTitle)
	}else if(vuexqueryForm.area.indexOf("以上")!=-1){
		this.areaTitle=vuexqueryForm.area.replace('以上', '㎡以上')
	}else{
		this.areaTitle=vuexqueryForm.area
	}
	// 排序赋值
	if(vuexqueryForm.sortColumn==1&&vuexqueryForm.sortType==1){
		this.ArryTitle="最新发布"
	}else if(vuexqueryForm.sortColumn==2&&vuexqueryForm.sortType==1){
		this.ArryTitle="价格升序"
	}else if(vuexqueryForm.sortColumn==2&&vuexqueryForm.sortType==0){
		this.ArryTitle="价格降序"
	}else if(vuexqueryForm.sortColumn==3&&vuexqueryForm.sortType==1){
		this.ArryTitle="面积升序"
	}else if(vuexqueryForm.sortColumn==3&&vuexqueryForm.sortType==0){
		this.ArryTitle="面积降序"
	}

  },
  methods:{
	...mapActions(["SaveUserSelect"]),
	// 店铺数据
	loadData(){
		const{vuexqueryForm}=this
		// 如果 关键字存在  才存入Vuex
		if(this.$route.params.Words){
			vuexqueryForm.keywords=this.$route.params.Words
			this.SaveUserSelect(vuexqueryForm)
		}
		recommroomList({
			keywords:vuexqueryForm.keywords,
			area:vuexqueryForm.area,
			rent:vuexqueryForm.rent,
			format:vuexqueryForm.format,
			district:vuexqueryForm.district,
			pageNumber:vuexqueryForm.pageNumber,
			pageSize:vuexqueryForm.pageSize,
			sortColumn:vuexqueryForm.sortColumn,
			sortType:vuexqueryForm.sortType
		}).then(res=>{
			console.log(res)
			// 店铺数组
			this.roomList = res.current === "1" ? res.records : [...this.roomList, ...res.records];
			console.log(this.roomList)
			// console.log(this.roomList)
			this.loading = false;
			// 如果
			if (this.roomList >= res.total) {
				this.finished = true;		// 结束加载状态
			}else if(res.records.length>0){
				this.finished = false;
			}else if(res.records.length==0){
				this.finished = true;		
			}
			// 手动添加物业条件数组
			for(let i in res.records){
				// 改造数组
				let formatList=res.records[i].roomPropertyConditions.replace('[', '').replace(']', '').split(",");
				// 再将改造后的数组，添加到res.records里面
				res.records[i].roomPropertyConditionsFormat = formatList;
			}
		})
	},
	// 页码数++，重新加载数据
	reLoadData(){
		this.loading = true;
		const{vuexqueryForm}=this
		vuexqueryForm.pageNumber+=1
		this.loadData()
	},
	// 下拉监听开始
	listenerFunction(e) {
		document.addEventListener('scroll', this.handleScroll, true);
	},
	handleScroll () {
		// console.log(window.pageYOffset)
		if(window.pageYOffset>200){
			this.scrollTop=true
		}else{
			this.scrollTop=false
		}
	},
	// 下拉监听结束

	//  关闭地区选择框
	cancelCode(){
		this.$refs.item.toggle();
	},
	// 确认地区选择
	confirmCode(event){
		console.log('this.onAddrConfirm=>e', event)
		this.districtTitle=event[0].name + '-' + event[1].name + '-'+event[2].name
		this.queryForm.district=event[0].name + '-' + event[1].name + '-'+event[2].name
		this.queryForm.pageNumber=1
		// 将选中条件存入Vuex
		this.SaveUserSelect(this.queryForm)
		// 请求数据
		this.loadData()
		// 关闭弹窗
		this.$refs.item.toggle();
	},
	// 选择租金
	changeRent(value){
		console.log(value)
		if(value==""){
			this.RentTitle="租金"
			this.queryForm.rent=""
		}
		else if(value=="1000以下"){
			this.RentTitle="1000元以下"
		}
		else{
			this.RentTitle=value+'元'
			this.queryForm.rent=value
		}
		// 页码回到第一页
		this.queryForm.pageNumber=1
		// 将选中条件存入Vuex
		this.SaveUserSelect(this.queryForm)
		// 请求数据
		this.loadData()
	},
	// 最小租金
	changeminPrices(value){
		console.log(value)
		this.minPrices=value
		this.docmHeight = document.documentElement.clientHeight;//获取当前屏幕高度
		window.onresize = () => {//屏幕高度变化时判断
		return (() => {
			let showHeight = document.body.clientHeight;
			this.hidshow = this.docmHeight > showHeight ? false : true;
		})();
		}
	},
	// 最大租金
	changemaxPrices(value){
		console.log(value)
		this.maxPrices=value
	},
	// 确认租金
	onConfirmRent(){
		const{maxPrices,minPrices}=this
		var rent=""
		console.log(maxPrices,minPrices)
		if(maxPrices!=""&&minPrices==""){
			rent=maxPrices+"以下"
			this.RentTitle=maxPrices+"元以下"
			console.log(rent)
		}else if(maxPrices==""&&minPrices!=""){
			rent=minPrices+"以上"
			console.log(rent)
			this.RentTitle=minPrices+"元以上"
		}else if(maxPrices==""&&minPrices==""){
			rent=""
			console.log(rent)
			this.RentTitle='租金'
		}else{
			rent=minPrices+"-"+maxPrices
			console.log(rent)
			this.RentTitle=rent+"元"
		}
		// 页码回到第一页
		this.queryForm.pageNumber=1
		// 租金赋值
		this.queryForm.rent=rent
		// 将选中条件存入Vuex
		this.SaveUserSelect(this.queryForm)
		// 请求数据
		this.loadData()
		this.maxPrices=""
		this.minPrices=""
		this.$refs.rentItem.toggle();
	},
	// 租金下拉菜单 关闭后触发的事件
	delRentNum(){
		this.minPrices=""
		this.maxPrices=""
	},
	// 选择业态
	changeformat(value){
		// console.log(value)
		if(value==""){
			this.formatTitle="业态"
			this.queryForm.format=""
		}else{
			this.formatTitle=value
			this.queryForm.format=value
		}
		// 页码回到第一页
		this.queryForm.pageNumber=1
		// 将选中条件存入Vuex
		this.SaveUserSelect(this.queryForm)
		// 请求数据
		this.loadData()
	},
	// 选择面积
	changeArea(value,text){
		console.log(value,text)
		if(value==""){
			this.areaTitle="面积"
			this.queryForm.area=""
		}else if(value=="20以下"){
			this.areaTitle="20㎡以下"
		}else{
			this.areaTitle=value+"㎡"
			this.queryForm.area=value
		}
		// 页码回到第一页
		this.queryForm.pageNumber=1
		// 将选中条件存入Vuex
		this.SaveUserSelect(this.queryForm)
		// 请求数据
		this.loadData()
	},
	// 最小面积
	changeminArea(value){
		console.log(value)
		this.minArea=value
	},
	// 最大面积
	changemaxArea(value){
		console.log(value)
		this.maxArea=value
	},
	// 确认面积（输入框输入）
	onConfirmArea(){
		const{maxArea,minArea}=this
		var area=""
		// console.log(maxPrices,minPrices)
		if(maxArea!=""&&minArea==""){
			area=maxArea+"以下"
			this.areaTitle=maxArea+"㎡以下"
			console.log(area)
		}else if(maxArea==""&&minArea!=""){
			area=minArea+"以上"
			this.areaTitle=minArea+"㎡以上"
		}else{
			area=minArea+"-"+maxArea
			console.log(area)
			this.areaTitle=area+"㎡"
		}
		// 页码回到第一页
		this.queryForm.pageNumber=1
		// 租金赋值
		this.queryForm.area=area
		// 将选中条件存入Vuex
		this.SaveUserSelect(this.queryForm)
		// 请求数据
		this.loadData()
		this.maxArea=""
		this.minArea=""
		this.$refs.areaItem.toggle();
	},
	// 面积下拉菜单 关闭后触发的事件
	delAreaNum(){
		this.minArea=""
		this.maxArea=""
	},
	// 更改数组排序
	changeArry(value){
		console.log("排序",value)
		if(value==""){
			this.queryForm.sortColumn=""
			this.queryForm.sortType=""
			this.ArryTitle="排序"
		}else if(value=="最新发布"){
			this.queryForm.sortColumn=1
			this.queryForm.sortType=1
			this.ArryTitle="最新发布"
		}else if(value=="价格升序"){
			this.queryForm.sortColumn=2
			this.queryForm.sortType=1
			this.ArryTitle="价格升序"
		}else if(value=="价格降序"){
			this.queryForm.sortColumn=2
			this.queryForm.sortType=0
			this.ArryTitle="价格降序"
		}else if(value=="面积升序"){
			this.queryForm.sortColumn=3
			this.queryForm.sortType=1
			this.ArryTitle="面积升序"
		}else if(value=="面积降序"){
			this.queryForm.sortColumn=3
			this.queryForm.sortType=0
			this.ArryTitle="面积降序"
		}
		// 页码回到第一页
		this.queryForm.pageNumber=1
		// 将选中条件存入Vuex
		this.SaveUserSelect(this.queryForm)
		// 请求数据
		this.loadData()
	},
	// 去搜索
	toSearch(){
		this.$router.push({path:'/search'})
	},
	// 去店铺详情
	to_detail(id){
		this.$router.push({path:"/roomDetail",query:{roomId:id}})
	},
	changeBlur(){
      let u = navigator.userAgent, app = navigator.appVersion;
      let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      if(isIOS){
        setTimeout(() => {
          const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
          }, 200)
      }
    },
	watchResize() {
		//实时变化的窗口高度
		this.screenHeight = document.documentElement.clientHeight;
	},


  }
}
</script>

<style lang="less" scoped>
// .components-foot{
//   position: fixed;
//   bottom: 0;
// }
// 输入框
.search{
	padding: 0.2rem 0.35rem;
	background-color: #F4F3F8;
}
.search-input{
	.van-cell.van-field{
		background-color: #E8E8EA;
		padding: 0;
		align-items: center;
		padding-left: 0.2rem;
	}
	.van-field__control{
		height: 0.6rem;
	}
}
// 条件区域
/deep/.van-dropdown-menu__bar{
	padding: 0 0.2rem;
}
.dropdown-menu.on{
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 999;
}
.dropdown-content{
	padding: 0 0.2rem;
}
.dropdown-title{
	font-size: 0.18rem;
	font-weight: 600;
	margin-top: 0.1rem;
}
.dropdown-list{
	display: flex;
	flex-wrap: wrap;
}
.list-item{
	font-size: 0.14rem;
	border: 1px solid #ddd;
	width: 25%;
	text-align: center;
	margin: 0.05rem;
}
// 租金区域
.rent-select{
	padding: 0 0.49rem;
	padding-top: 0.2rem;
	padding-bottom: 0.38rem;
	.rent-title{
		font-size: 0.3rem;
		font-weight: 600;
		color: #2B2B2D;
		font-weight: 600;
	}
	.rent-input{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 0.25rem;
		span{
			width: 0.3rem;
			display: block;
			font-size: 0.24rem;
		}
		/deep/.van-field__control{
			text-align: center;
		}
		/deep/.van-cell{
			font-size: 0.26rem;
			border-bottom: 1px solid #D2D2D4;
		}
		/deep/.van-cell::after{
			display: none;
		}
	}
}
.sure-btn{
	padding: 0 0.49rem;
	padding-bottom: 0.3rem;
}
// 面积区域
// .areaItem {
// 	.van-dropdown-item__content{}
// }

// 店铺quesheng
.hasNone{
	font-size: 0.28rem;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	padding: 1.5rem 0;
	color: #4C4C4C;
	img{
		width: 2.5rem;
		height: auto;
		margin-bottom: 0.25rem;
	}
}
// 店铺数组
.room-list{
	margin: 0.45rem 0;
	padding: 0 0.34rem;
	height: 100%;
}
.room-item{
	display: flex;
	margin-top: 0.25rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid #eee;
	.room-pic{
		margin-right: 0.25rem;
		width: 2rem;
    	height: 1.6rem;
		position: relative;
		img{
			width: 100%;
			height: 100%;
		}
		.sale-img{
			position: absolute;
			width: 0.9rem;
			height: 0.3rem;
			display: flex;
			justify-content: center;
			align-items: center;
			left: 0;
			bottom: 0;
			font-size: 0.18rem;
			color: #fff;
			background-color: #EA4800;
			opacity: 0.9;
		}
		.sale-text{
            position: absolute;
            width: 0.9rem;
            height: 0.3rem;
            display: flex;
            justify-content: center;
            align-items: center;
            right: 0;
            bottom: 0;
            font-size: 0.18rem;
            color: #fff;
            background-color: #ea0000;
            opacity: 0.9;
        }
	}
	.room-text{
		// flex: 1;
		font-size: 0.2rem;
		width: 4.57rem;
		overflow: hidden;
		.room-name{
			font-weight: 600;
			font-size: 0.32rem;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.room-address{
			display: flex;
			font-size: 0.22rem;
			align-items: center;
			color: #999;
			margin-top: 0.1rem;
			span{
				position: relative;
				margin-right: 0.1rem;
			}
		}
		.room-num{
			display: flex;
			font-size: 0.2rem;
			align-items: center;
			justify-content: space-between;
			.num-prices{
				color: #EA4800;
				font-weight: 600;
				font-size: 0.28rem;
			}
		}
	}
}
.room-num{
		.num-area{
			display: flex;
			align-items: center;
		}
}
//物业条件数组
.room-format{
  display: flex;
  margin: 0.1rem 0;
  .format-item{
    font-size: 0.18rem;
    margin-right: 0.15rem;
	color: #FFA740;
	background-color: #fff5ea;
	padding: 2px;
	white-space: nowrap;

  }
}
// 通用底部
.foot.on{
  position: absolute;
  bottom: 0;
}
</style>